<template>
  <div>
    <form @submit.prevent="fn"> 
      <label>姓名：</label>
      <input type="text" v-model="form.uname"><br><br>

      <label>年龄：</label>
      <input type="number" v-model="form.age"><br><br>

      <label>身高：</label>
      <input type="text" v-model.number="form.height">(米)<br><br>

      <label>体重：</label>
      <input type="number" v-model="form.weight">(公斤)<br><br>

      <label>病史：</label>
      <input type="text" v-model="form.medical"><br><br>

      <button @click="fn">诊断</button>
    </form>

    <p v-show="!flag" v-if="18.5 <= form.BMI && 24.9 >= form.BMI">患者 {{form.uname}} 的诊断结果：健康 </p>
    <p v-show="!flag" v-if="18.5 >= form.BMI">患者 {{form.uname}} 的诊断结果：过轻 </p>
    <p v-show="!flag" v-if="24.9 <= form.BMI">患者 {{form.uname}} 的诊断结果：过重 </p>
  </div>
</template>

<script>
export default {
  //该vue组件的数据源
  data () {
    return {
      flag: true,
      form: {
        uname : '',
        age : '',
        height : '',
        weight : '',
        medical : '',
        BMI: '',
      },
    }
  },
  // 方法集合
  methods: {
    fn() {
      this.flag = false
      this.form.BMI = this.form.weight/(this.form.height * this.form.height)
    },
  }
}
</script>